<template>
  <div class="bs-setting-wrap" @click.stop>
    <el-form ref="form" :model="config" :rules="rules" label-width="100px" label-position="left"
      class="setting-body bs-el-form">
      <div class="data-setting-box">
        <div v-if="config.option.displayOption.dataSourceType.enable" class="data-setting-data-box">
          <div class="lc-field-head">
            <div class="lc-field-title">
              数据来源
            </div>
          </div>
          <div class="lc-field-body">
            <el-form-item v-if="config.option.displayOption.expression && config.option.displayOption.expression.enable"
              label="数据来源">
              <el-select v-model="config.dataSource.source" class="bs-el-select" popper-class="bs-el-select"
                placeholder="请选择数据来源" clearable @change="sourceChange">
                <el-option value="dataset" label="数据集" />
                <el-option value="expression" label="表达式" />
                <el-option value="static" label="静态值" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="config.dataSource.source === 'dataset'" label="数据集">
              <data-set-select :dataset-name="datasetName" :ds-id="config.dataSource.businessKey" @getDsId="changeDsid">
                <template #dataSetSelect="{ value }">
                  <slot name="dataSetSelect" :value="value" />
                </template>
              </data-set-select>
            </el-form-item>
            <el-form-item
              v-if="config.dataSource.source === 'expression' && config.option.displayOption.expression && config.option.displayOption.expression.enable"
              label="表达式">
              <i class="el-icon-edit expression" @click="openExpression" />
            </el-form-item>
            <el-form-item v-if="config.dataSource.source === 'static'" label="文本内容">
              <el-input v-model="config.customize.title" placeholder="请输入文本内容" clearable />
            </el-form-item>
          </div>
        </div>
        <div v-if="['texts','customComponent', 'marquee', 'echartsComponent'].includes(config.type)"
          class="data-setting-data-box">
          <div class="lc-field-head">
            <div class="lc-field-title">
              数据处理
            </div>
          </div>
          <div class="lc-field-body">
            <el-form-item label="数据处理脚本">
              <el-input v-model="config.dataHandler" type="textarea" :rows="5"
                placeholder="示例:data.forEach(item => { // 数据处理 })" />
            </el-form-item>
          </div>
        </div>
        <div
          v-if="!['tree', 'multipleNumberChart', 'carousel'].includes(config.type) && config.option.displayOption.dataSourceType.enable && (!['expression', 'static'].includes(config.dataSource.source))"
          class="data-setting-data-box">
          <div class="lc-field-head">
            <div class="lc-field-title">
              数据配置
            </div>
          </div> 
          <!--  基础组件数据配置  -->
          <template
            v-if="!['customComponent', 'remoteComponent', 'echartsComponent', 'candlestick'].includes(config.type)">
            <!--维度多选-->
            <el-form-item v-if="config.option.displayOption.dimensionField.enable"
              :label="config.option.displayOption.dimensionField.label"
              :prop="config.option.displayOption.dimensionField.multiple ? 'dataSource.dimensionFieldList' : 'dataSource.dimensionField'"
              class="data-form-item">
              <el-drag-select v-if="config.option.displayOption.dimensionField.multiple"
                v-model="config.dataSource.dimensionFieldList" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable :multiple="config.option.displayOption.dimensionField.multiple"
                @change="dimensionFieldListChange" @valuePositionChange="valuePositionChange">
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-drag-select>
              <!--维度单选-->
              <el-select v-else v-model="config.dataSource.dimensionField" class="bs-el-select"
                popper-class="bs-el-select" filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <!--指标-->
            <el-form-item v-if="config.option.displayOption.metricField.enable"
              :label="config.option.displayOption.metricField.label" prop="dataSource.metricField"
              class="data-form-item">
              <el-select v-model="config.dataSource.metricField" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <!--分组-->
            <el-form-item v-if="config.option.displayOption.seriesField.enable"
              :label="config.option.displayOption.seriesField.label" prop="dataSource.metricField"
              class="data-form-item">
              <el-select v-model="config.dataSource.seriesField" class="bs-el-select" popper-class="bs-el-select"
                clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <!--  K线图数据配置  -->
          <template v-else-if="config.type === 'candlestick'">
            <el-form-item v-for="(fieldItem, i) in fieldNameMapping" :key="i" prop="dataSource.xField"
              class="data-form-item" :label="fieldItem.desc">
              <el-select v-model="config.dataSource[fieldItem.name]" :multiple="fieldItem.multiple" class="bs-el-select"
                popper-class="bs-el-select" filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div> 
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <!--  g2plot和远程组件数据配置  -->
          <template v-else>
            <template v-for="(setting, index) in config.setting.filter(set => set.tabName === 'data')">
              <el-form-item :key="index" :label="setting.label" class="data-form-item">
                <el-select v-if="setting.type === 'select'" class="bs-el-select select" popper-class="bs-el-select"
                  :value="setting.value" filterable clearable :multiple="setting.multiple"
                  :placeholder="`请选择${setting.label}`" @change="changeCustomProps(...arguments, setting)">
                  <el-option v-for="(field, fieldIndex) in dataSourceDataList" :key="fieldIndex" :label="field.comment"
                    :value="field.name">
                    <div class="source-key-option">
                      <div>
                        {{ field.comment !== "" ? field.comment : field.name }}
                      </div>
                      <div class="option-txt">
                        {{ field.name }}
                      </div>
                    </div>
                  </el-option>
                </el-select>
                <el-input v-else :value="setting.value" :placeholder="`请输入${setting.label}`"
                  @change="changeCustomProps(...arguments, setting)" />
              </el-form-item>
            </template>
          </template>
        </div>
        <div v-if="config.option.displayOption.headerField && config.option.displayOption.headerField.enable"
          name="轮播表配置">
          <template slot="title">
            <div class="lc-field-head">
              <div class="lc-field-title">
                轮播表配置
              </div>
            </div>
          </template>
          <div class="lc-field-body">
            <el-table ref="headerTable" :border="true" :data="config.customize.columnConfig" class="params-config">
              <el-table-column prop="code" label="参数名称" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.code" placeholder="请输入名称" readonly />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="列名称" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入字段名称" />
                </template>
              </el-table-column>
              <el-table-column prop="width" label="列宽" width="90" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.width" placeholder="请输入列宽" clearable />
                </template>
              </el-table-column>
              <el-table-column prop="align" label="对齐方式" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.align" class="bs-el-select" popper-class="bs-el-select" filterable
                    clearable placeholder="请选择对齐方式">
                    <el-option value="left" label="左对齐" />
                    <el-option value="center" label="居中" />
                    <el-option value="right" label="右对齐" />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-if="config.option.displayOption.mapField && config.option.displayOption.mapField.enable" name="地图数据配置">
          <template slot="title">
            <div class="lc-field-head">
              <div class="lc-field-title">
                地图数据配置
              </div>
            </div>
          </template>
          <div class="lc-field-body">
            <el-form-item label="值" class="data-form-item">
              <el-select v-model="config.customize.value" class="bs-el-select" popper-class="bs-el-select" filterable
                clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地名字段" class="data-form-item">
              <template slot="label">
                <span>
                  地名字段
                  <el-tooltip class="item" effect="dark" content="色块模式下可用，地图将根据该属性值寻找对应的区域，并按照值字段进行色块渲染"
                    placement="top">
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
              </template>
              <el-select v-model="config.customize.name" class="bs-el-select" popper-class="bs-el-select" filterable
                clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="经度字段" class="data-form-item">
              <template slot="label">
                <span>
                  经度字段
                  <el-tooltip class="item" effect="dark" content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示" placement="top">
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
              </template>
              <el-select v-model="config.customize.xaxis" class="bs-el-select" popper-class="bs-el-select" filterable
                clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="纬度字段" class="data-form-item">
              <template slot="label">
                <span>
                  纬度字段
                  <el-tooltip class="item" effect="dark" content="打点模式下可用，地图将经纬度寻找指定坐标，并进行打点显示" placement="top">
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
              </template>
              <el-select v-model="config.customize.yaxis" class="bs-el-select" popper-class="bs-el-select" filterable
                clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div v-if="config.option.displayOption.flyMapField && config.option.displayOption.flyMapField.enable"
          name="飞线地图数据配置">
          <div class="lc-field-body">
            <el-form-item label="起点经度" class="data-form-item">
              <el-select v-model="config.customize.dataField.fromLng" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起点纬度" class="data-form-item">
              <el-select v-model="config.customize.dataField.fromLat" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="终点经度" class="data-form-item">
              <el-select v-model="config.customize.dataField.toLng" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="终点纬度" class="data-form-item">
              <el-select v-model="config.customize.dataField.toLat" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起点名称" class="data-form-item">
              <el-select v-model="config.customize.dataField.fromName" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="终点名称" class="data-form-item">
              <el-select v-model="config.customize.dataField.toName" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值" class="data-form-item">
              <el-select v-model="config.customize.dataField.value" class="bs-el-select" popper-class="bs-el-select"
                filterable clearable>
                <el-option v-for="(field, index) in dataSourceDataList" :key="index" :label="field.comment"
                  :value="field.name">
                  <div class="source-key-option">
                    <div>
                      {{ field.comment !== "" ? field.comment : field.name }}
                    </div>
                    <div class="option-txt">
                      {{ field.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div
          v-if="config.option.displayOption.params.enable && (!['expression', 'static'].includes(config.dataSource.source))"
          class="data-setting-data-box">
          <div class="lc-field-head">
            <div class="lc-field-title">
              参数配置
            </div>
          </div>
          <div class="lc-field-body">
            <el-table ref="singleTable" :border="true" :data="params" class="params-config">
              <el-table-column prop="name" label="参数名称" align="center">
                <template slot-scope="scope">
                  <div>
                    <el-form-item>
                      <el-input v-model="scope.row.name" placeholder="请输入名称" readonly />
                      <el-tooltip :content="`${scope.row.type ? '参数类型：' + scope.row.type : ''
                        }
                          ${scope.row.remark ? '备注：' + scope.row.remark : ''
                        }`
                        " placement="top">
                        <span class="el-icon-question" style="color:#9e9e9e" />
                      </el-tooltip>
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="value" label="参数值" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="scope.row.require === 1 ? 'params' : null">
                    <el-date-picker v-if="scope.row.type === 'Date'" v-model="scope.row.value" type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
                    <el-input v-else v-model="scope.row.value" clearable placeholder="请输入参数值" />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- <div
          v-if="config.option.displayOption.serverPagination.enable"
          class="data-setting-data-box"
          name="分页配置"
        >
          <div class="lc-field-head">
            <div class="lc-field-title">
              分页配置
            </div>
          </div>
          <div class="form">
            <el-form-item
              v-if="config.option.displayOption.serverPagination.enable"
              label="服务端分页"
              prop="dataSource.serverPagination"
            >
              <el-radio-group
                v-model="config.dataSource.serverPagination"
                class="bs-el-radio-group"
                size="mini"
                @change="serverPaginationChange"
              >
                <el-radio-button :label="true">
                  开启
                </el-radio-button>
                <el-radio-button :label="false">
                  关闭
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="
                config.dataSource.serverPagination &&
                  config.option.displayOption.pageSize.enable
              "
              label="分页长度"
              prop="dataSource.pageSize"
            >
              <el-select
                v-model="config.dataSource.pageSize"
                class="bs-el-select"
                popper-class="bs-el-select"
                filterable
                allow-create
                default-first-option
              >
                <el-option
                  v-for="size in pageSizeList"
                  :key="size"
                  :label="size"
                  :value="size"
                />
              </el-select>
            </el-form-item>
          </div>
        </div> -->
        <ComponentBinding v-if="['button'].includes(config.type)" :config="config"
          :source-field-list="sourceFieldList" />
        <ComponentRelation v-if="!['carousel', 'gauge', 'liquid', 'marquee'].includes(config.type)" :config="config"
          :source-field-list="sourceFieldList" />
        <expression-dialog ref="expressionDialog" :config="config" />
      </div>
    </el-form>
  </div>
</template>
<script>
import ElDragSelect from './ElDragSelect.vue'
// import { isEmpty, cloneDeep } from 'lodash'
import isEmpty from 'lodash/isEmpty'
import cloneDeep from 'lodash/cloneDeep'
import ComponentRelation from 'data-room-ui/BigScreenDesign/RightSetting/ComponentRelation/index.vue'
import ComponentBinding from 'data-room-ui/BigScreenDesign/RightSetting/ComponentBinding/index.vue'
import dataSetSelect from 'data-room-ui/DataSetSetting/index.vue'
import { mapState } from 'vuex'
import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
import ExpressionDialog from 'data-room-ui/BigScreenDesign/RightSetting/ExpressionDialog.vue'
export default {
  name: 'DataSetting',
  components: {
    ComponentRelation,
    ComponentBinding,
    dataSetSelect,
    ElDragSelect,
    ExpressionDialog
  },
  data() {
    return {
      fieldNameMapping: [ // k线图的字段列表
        {
          name: 'xfield',
          desc: 'X轴',
          multiple: false
        },
        {
          name: 'openField',
          desc: '开盘价',
          multiple: false
        },
        {
          name: 'closeField',
          desc: '收盘价',
          multiple: false
        },
        {
          name: 'lowField',
          desc: '最低价',
          multiple: false
        },
        {
          name: 'highField',
          desc: '最高价',
          multiple: false
        }
      ],
      fieldsList: [],
      params: [], // 参数配置
      datasetName: '',
      headerList: [],
      pageSizeList: [10, 20, 50, 100],
      rules: {
        // 'dataSource.businessKey': [
        //   { required: true, message: '请选择数据集', trigger: 'change' }
        // ],
        // 'dataSource.dimensionField': [
        //   { required: true, message: '请选择维度', trigger: 'change' }
        // ],
        // 'dataSource.dimensionFieldList': [
        //   { required: true, message: '请选择维度', trigger: 'change' }
        // ],
        // 'dataSource.metricField': [
        //   { required: true, message: '请选择指标', trigger: 'change' }
        // ],
        params: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                this.params.map(sort => {
                  if (!sort.value) {
                    callback(new Error('请输入参数值'))
                  } else {
                    callback()
                  }
                })
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      pageInfo: state => state.bigScreen.pageInfo,
      config: state => state.bigScreen.activeItemConfig
      // 缓存数据集
      // cacheDataSets: state => state.bigScreen.pageInfo.pageConfig.cacheDataSets
    }),
    dataSourceDataList() {
      return this.fieldsList?.map(item => ({
        ...item,
        comment: item?.fieldDesc || item?.fieldName,
        name: item?.fieldName
      }))
    },
    appCode: {
      get() {
        return this.$store.state.bigScreen.pageInfo.appCode
      }
    },
    seriesFieldProp() {
      if (this.config.option.displayOption.seriesField.required) {
        return 'dataSource.seriesField'
      } else {
        return ''
      }
    },
    pageCode() {
      return this.$route.query.code
    },
    // 映射字段
    sourceFieldList() {
      const list = this?.config?.customize?.bindComponents || this.fieldsList
      const modifiedList = list?.map(field => ({
        label: field.comment || field.fieldDesc,
        value: field.name || field.fieldName
      })) || []

      if (['input', 'timePicker', 'dateTimePicker'].includes(this.config.type)) {
        modifiedList.push({ label: '当前组件值', value: this.config.code })
      }
      if (['map', 'flyMap'].includes(this.config.type)) {
        modifiedList.push({ label: '点击区域名称', value: 'clickAreaName' })
      }
      return modifiedList
    }
  },
  watch: {
    // 切换数据集时将其他配置清空
    'config.dataSource.businessKey'(val) {
      this.clearCustomVerify()
      this.clearVerify()
    },
    // 切换数据集类型时将其他配置清空
    'config.dataSource.dataSetType'() {
      this.config.dataSource.businessKey = ''
      this.clearCustomVerify()
      this.clearVerify()
    },
    // 参数改变时
    params: {
      handler(val) {
        if (!isEmpty(val)) {
          const params = cloneDeep(val)
          const paramsMap = params.reduce((obj, param) => {
            obj[param.name] = param.value
            return obj
          }, {})
          this.config.dataSource.params = paramsMap
        }
      },
      deep: true
    },
    'config.dataSource.dimensionField'(val) {
      if (['select'].includes(this.config.type)) {
        if (this.config.customize?.placeholder) {
          this.config.customize.placeholder = '请选择' + this.dataSourceDataList.find(item => item.fieldName === val).comment
        }
      }
    }
  },
  mounted() {
    if (this.config.dataSource && this.config.dataSource.businessKey) {
      this.getDataSetDetailsById(this.config.dataSource.businessKey, 'initial')
    }
    // TODO 临时解决方案，解决旧版飞线地图配置缺少字段问题
    if (this.config.option.displayOption.flyMapField && this.config.option.displayOption.flyMapField.enable) {
      if (!this.config.customize.dataField) {
        this.config.customize.dataField = {
          // 起点名称
          fromName: '',
          // 起点经度
          fromLng: '',
          // 起点纬度
          fromLat: '',
          // 终点名称
          toName: '',
          // 终点经度
          toLng: '',
          // 终点纬度
          toLat: '',
          // 轨迹数据
          value: ''
        }
      }
    }
  },
  methods: {
    // 切换数据源的时候将文字和数字组件的相关配置清空
    sourceChange(val) {
      this.config.expression = 'return '
      this.config.expressionCodes = []
    },
    changeDsid(dsId) {
      this.clearVerify()
      if (this.config.customize && this.config.customize.columnConfig) {
        this.config.customize.columnConfig = []
      }
      this.getDataSetDetailsById(dsId, 'treeTable')
    },
    // 打开表达式弹窗
    openExpression() {
      this.$refs.expressionDialog.init()
    },
    // 切换前后端分页
    serverPaginationChange(val) {
      this.config.customize.webPagination = !val
    },
    // 清空自定义组件配置，与手动配置的组件区分开
    clearCustomVerify() {
      this.config.setting = this.config.setting?.map(set => {
        this.datasetName = ''
        if (set.tabName === 'data') {
          set.value = ''
        }
        return set
      })
    },
    // 清空手动配置的组件配置
    clearVerify() {
      this.config.dataSource.metricField = ''
      this.config.dataSource.dimensionField = ''
      this.config.dataSource.dimensionFieldList = []
      this.config.dataSource.seriesField = ''
      this.config.dataSource.params = {}
    },
    // 根据数据集来获取数据集详情
    getDataSetDetailsById(id, type) {
      if (id) {
        this.config.dataSource.businessKey = id
        getDataSetDetails(id).then(res => {
          this.fieldsList = res.fields
          // 初始化时以组件本来的参数设置为主
          if (type === 'initial') {
            const deleteKeys = []
            for (const key in this.config.dataSource.params) {
              const param = res?.params?.find(field => field.name === key)
              // 如果组件参数在数据集中找不到，说明参数已经被删除，不需要再显示
              if (param) {
                deleteKeys.push(key)
                this.params.push({
                  name: key,
                  value: this.config.dataSource.params[key],
                  type: param?.type,
                  remark: param?.remark
                })
              }
            }
            if (res.params) {
              // 如果数据集中有新增的参数，需要显示出来
              res.params.forEach(param => {
                if (!this.params.find(item => item.name === param.name)) {
                  this.params.push({
                    name: param.name,
                    value: param.value,
                    type: param.type,
                    remark: param.remark
                  })
                }
              })
            }
            deleteKeys.forEach(key => {
              delete this.config.dataSource.params[key]
            })
          } else {
            this.params = res.params
          }
          this.datasetName = res.name
          // 选择数据集的时候，如果数据集类型是dataModel,则不显示参数配置
          this.config.option.displayOption.params.enable = res.type !== 'dataModel'
          // 根据数据集初始化组件的入参：inparams
          if (res.type !== 'dataModel') {
            this.config.inParams =
              this.params?.map(param => {
                return {
                  name: param.remark, // 参数名
                  code: param.name // 参数值
                }
              }) || []
          } else {
            this.config.inParams =
              this.fieldsList?.map(field => {
                return {
                  name: field.fieldDesc, // 参数名
                  code: field.fieldName // 参数值
                }
              }) || []
          }

          // 根据数据集的参数初始化表单项
          this.config.paramsList = this.params
          if (type === 'treeTable') {
            const enumeration = {
              dataSetType: '1', // 数据集类型
              dataSetKey: '', // 数据集
              itemKeyName: '', // 选项显示字段
              itemValueName: '', // 选项value字段
              params: []
            }
            this.config.fields =
              this.params?.map(param => {
                return {
                  name: param.name,
                  label: param.remark || param.name,
                  component: 'input',
                  display: res.type !== 'dataModel',
                  enumeration: {
                    ...enumeration
                  },
                  queryRule: 'like'
                }
              }) || []
          }
        })
      }
    },
    // 改变维度
    dimensionFieldListChange(list) {
      const colFieldList = []
      if (list.length > 0) {
        list.forEach(item => {
          colFieldList.push(
            this.dataSourceDataList.find(field => field.name === item)
          )
        })
      }
      this.headerList = []
      colFieldList.forEach(item => {
        this.headerList.push({ name: item.comment, code: item.name, width: '150', align: 'left' })
      })
      this.config.customize.columnConfig = cloneDeep(this.headerList)
      this.$store.commit('bigScreen/changeActiveItemConfig', this.config)
    },
    valuePositionChange(value) {
      const sortedColumnData = {}
      const columnData = cloneDeep(this.config.option?.columnData)
      value.forEach((item, index) => {
        sortedColumnData[item] = columnData[item]
      })
      this.config.option.columnData = sortedColumnData
      this.$store.commit('bigScreen/changeActiveItemConfig', this.config)
    },
    changeCustomProps(value, setting) {
      this.config.setting = this.config.setting.map(item => {
        if (item.field === setting.field) {
          item.value = value
        }
        return item
      })
    }
    // 改变缓存数据集key
    // changeCacheBusinessKey (id) {
    //   // 根据id在缓存中获取fields
    //   this.fieldsList = this.cacheDataSets?.find(cache => cache.dataSetId === id)?.fields
    //   this.params = this.cacheDataSets?.find(cache => cache.dataSetId === id)?.params
    // }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/settingWrap.scss";

.add-filter-box {
  position: relative;

  .add-filter {
    margin-left: 100px;
  }

  .add-filter-btn {
    position: absolute;
    top: 0;
  }
}

.form {
  padding: 12px;
}

::v-deep .el-tag__close.el-icon-close::before {
  color: #fff;
}

::v-deep .el-tag__close.el-icon-close {
  top: -1px;

  &:hover {
    background-color: var(--bs-el-color-primary);
  }
}

.opt-wrap {
  margin-top: 10px;
}

.link-set-item {
  position: relative;
  border: 1px solid #f5f7fa;
  padding: 30px 16px 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px;

  .del-icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 20px;
    color: #f00;
  }

  .opt-wrap {
    display: flex;
    justify-content: center;
  }
}

//表达式样式
.expression {
  &:hover {
    cursor: pointer;
  }
}

// 修改设置面板样式
.data-setting-box {
  .data-setting-data-box {
    .lc-field-head {
      height: 30px;

      .lc-field-title {
        position: relative;
        padding-left: 12px;
        line-height: 30px;
        height: 30px;

        &:after {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          width: 4px;
          height: 14px;
          background-color: var(--bs-el-color-primary);
        }
      }
    }
  }
}
</style>
